<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<template v-if="isLogin">
			<!-- 添加 -->
			<template v-if="type=='add'">
				<view class="body">
					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">回款金额</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.amount" placeholder="输入回款金额" />
									<view class="link">元</view>
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">回款比例</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.point" placeholder="输入回款比例" />
									<view class="link">%</view>
								</view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">回款时间</view>
							<picker class="form-picker" mode="date" @change="selectDate(1,$event)">
								<view class="picker">
									<view v-if="params.btime" class="select-data t-r">{{params.btime}}</view>
									<view v-else class="select-data t-r f-grey">选择回款时间</view>
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>
								</view>
							</picker>
						</view>
					</view>

					<view class="form-wrap m-b2">
						<view class="form-textarea-item">
							<view class="label a-t">备注信息</view>
							<view class="form-textarea">
								<textarea class="inp-textarea" v-model="params.desc" placeholder="备注信息(选填)"
									maxlength="-1"></textarea>
							</view>
						</view>
					</view>

					<view class="m-b2">
						<c-uploadFile type='5' :pro_id="pro_id" task_id=""></c-uploadFile>
					</view>

					<view class="form-wrap m-b2">
						<view class="form-item">
							<view class="label">回款状态</view>
							<picker class="form-picker" mode="selector" :range="back_money_state" range-key="name"
								@change="changeState">
								<view class="picker">
									<view class="select-data t-r">{{params.status_name}}</view>
									<view class="icon">
										<view class="iconfont f-s34">&#xe8d4;</view>
									</view>
								</view>
							</picker>
						</view>
					</view>

				</view>
				<view class="footer">
					<view class="fix-wrap created-btn-wrap">
						<view class="btn submit-btn" @click="add">添加</view>
					</view>
				</view>
			</template>

			<!-- 编辑 -->
			<template v-if="type=='edit'">
				<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
				<template v-else>
					<view class="body">
						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">回款金额</view>
								<view class="form-input">
									<view class="content">
										<input type="digit" class="inp" v-model="params.amount" placeholder="输入回款金额" />
										<view class="link">元</view>
									</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">回款比例</view>
								<view class="form-input">
									<view class="content">
										<input type="digit" class="inp" v-model="params.point" placeholder="输入回款比例" />
										<view class="link">%</view>
									</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">回款时间</view>
								<picker class="form-picker" mode="date" @change="selectDate(1,$event)">
									<view class="picker">
										<view v-if="params.btime" class="select-data t-r">{{params.btime}}</view>
										<view v-else class="select-data t-r f-grey">选择回款时间</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>
									</view>
								</picker>
							</view>
						</view>

						<view class="form-wrap m-b2">
							<view class="form-textarea-item">
								<view class="label a-t">备注信息</view>
								<view class="form-textarea">
									<textarea class="inp-textarea" v-model="params.desc" placeholder="备注信息(选填)"
										maxlength="-1"></textarea>
								</view>
							</view>
						</view>

						<view class="m-b2">
							<c-uploadFile type='5' :pro_id="pro_id" :task_id="id"></c-uploadFile>
						</view>

						<view class="form-wrap m-b2">
							<view class="form-item">
								<view class="label">回款状态</view>
								<picker class="form-picker" mode="selector" :range="back_money_state" range-key="name"
									@change="changeState">
									<view class="picker">
										<view class="select-data t-r">{{params.status_name}}</view>
										<view class="icon">
											<view class="iconfont f-s34">&#xe8d4;</view>
										</view>
									</view>
								</picker>
							</view>
						</view>

					</view>
					<view class="footer">
						<view class="fix-wrap created-btn-wrap">
							<view class="btn submit-btn" @click="edit">保存</view>
						</view>
					</view>
				</template>
			</template>
		</template>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: getApp().globalData.isIphoneX,
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				pro_id: '', 
				id: '',
				type: 'add',
				back_money_state: [],
				pro_detail: {},
				files: [],
				params: {
					amount: '',
					btime: '',
					point: '',
					status: '',
					status_name: '',
					desc: '',
					files: []
				},
				isStop: true,
				loadingState: {
					default: true
				}
			}
		},
		async onLoad(params) { 
			this.isLogin = await this.$loginState('check');
			this.pro_id = params.pro_id;
			this.type = params.type; 
			this.back_money_state = this.$mock_data.back_money_state;
			if (this.type == 'add') {
				this.params.status = this.back_money_state[0].id;
				this.params.status_name = this.back_money_state[0].name;

				uni.setNavigationBarTitle({
					title: '添加回款'
				})
			}
			if (this.type == 'edit') {
				this.id = params.id;
				if (params.files) {
					let files = JSON.parse(params.files);
					files.forEach(item => {
						if (item.type == 6 && item.task_id == this.id) {
							this.params.files.push(item);
						}
					})
				}
				uni.setNavigationBarTitle({
					title: '回款详情'
				})
				if (this.isLogin) {
					this.getPromonbackInfo(); 
				}
			}
		},
		methods: {

			// 项目详情
			async getDetail() {
				
			},

			// 选择回款状态
			changeState(e) {
				this.params.status = this.back_money_state[e.target.value].id;
				this.params.status_name = this.back_money_state[e.target.value].name;
			},

			// 选择开始/结束时间 
			selectDate(type, e) {
				// type 1 开始时间 2 结束时间 
				if (type == 1) {
					this.params.btime = e.target.value;
				}
			},

			// 获取回款详情
			async getPromonbackInfo() {
				let res = await this.$api.user_api.promonbackInfo({
					id: this.id
				})
				 
				if (res.data.code == 200) {
					this.loadingState.default = false;
					this.params.amount = res.data.data.amount;
					this.params.point = res.data.data.point;
					this.params.btime = res.data.data.btime;
					this.params.status = res.data.data.status;
					this.back_money_state.forEach(item => {
						if (item.id == res.data.data.status) {
							this.params.status_name = item.name;
						}
					}) 
					this.pro_id=res.data.data.pro_id;
					this.params.desc = res.data.data.desc; 
					let pro_res = await this.$api.user_api.projectInfo({
						id: this.pro_id
					}) 
					if (pro_res.data.code == 200) { 
						pro_res.data.data.files.forEach(item => {
							if (item.type == 5) {
								this.files.push(item);
							}
						})
					}
				}
			},

			// 添加回款计划 
			async add() {
				let {
					amount,
					btime,
					point,
					status,
					desc,
				} = this.params;
				if (amount == '') {
					this.$showToast({
						title: '请输入回款金额'
					})
					return
				}

				if (point == '') {
					this.$showToast({
						title: '请输入回款比例'
					})
					return
				}

				if (btime == '') {
					this.$showToast({
						title: '请输入回款时间'
					})
					return
				}

				if (desc == '') {
					this.$showToast({
						title: '请输入回款描述'
					})
					return
				}

				if (this.isStop) {
					this.isStop = false;
					let res = await this.$api.user_api.addPromonbackByOne({
						amount,
						btime,
						point,
						desc,
						status,
						pro_id: this.pro_id
					})
					if (res.data.code == 200) {
						this.$showToast({
							icon: 'success',
							title: '添加成功',
						}).then(() => {
							uni.navigateBack({
								delta: 1
							})
							this.$store.commit('BACK_MONEY_LIST_UPDATE', 1);
						})
					} else {
						this.$showToast({
							icon: 'error',
							title: res.data.msg
						})
						this.isStop = true;
					}
				}


			},

			// 编辑回款计划
			async edit() {
				let {
					amount,
					btime,
					status,
					point,
					desc
				} = this.params;
				let res = await this.$api.user_api.promonbackEdit({
					id: this.id,
					amount,
					btime,
					point,
					desc,
					status,
					pro_id: this.pro_id
				})

				if (res.data.code == 200) {
					this.$showToast({
						icon: 'success',
						title: '编辑成功',
						duration: 1000,
					}).then(() => {

						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
							this.$store.commit('BACK_MONEY_LIST_UPDATE', 1); // 更新回款计划列表
						}, 1000)

					})
				} else {
					this.$showToast({
						icon: 'error',
						title: res.data.msg
					})
				}
			},

			async sendMsg() {
				if (!this.params.approver.id) {
					this.$showToast({
						title: '请选择审核人',
						duration: 1000,
					})
					return
				}

				if (this.isStop) {
					this.isStop = false;
					let res = await this.$api.user_api.addApprover({
						content: this.userInfo.username + '创建了新项目，请领导审核',
						approver: this.params.approver.id,
						carbon_copy: this.params.carbon_copy_id.join('_'),
						pro_id: this.id,
						content_type: '0',
						title: this.userInfo.username + '创建的项目'
					});
					if (res.data.code == 200) {
						this.$showToast({
							icon: 'success',
							title: '发送成功',
							duration: 1000,
						}).then(async () => {
							let update_status = await this.$api.project_api.updateProjectStatus({
								id: this.id,
								status: '1',
								content: '发送给老板审核'
							})
							if (update_status.data.code == 200) {
								this.$store.commit('PROJECT_LIST_UPDATE', 1);
							}

							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/project/project'
								})
							}, 1000)
						})
						this.isStop = true;
					} else {
						this.isStop = true;
						this.$showToast({
							icon: 'error',
							title: res.data.msg,
							duration: 1000,
						})
					}
				}
			},


		},

		computed: {

		},
		watch: {

		},
	}
</script>

<style lang="less" scoped>
	.created-btn-wrap {
		display: flex;

		.btn {
			height: 80rpx;
			line-height: 80rpx;
			margin: 10rpx 10rpx 0;
			flex-grow: 1;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
		}

		.next-btn {
			background: #ff9600;
		}

		.submit-btn {
			background: #0099ff;
		}
	}
</style>
